<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
     
  </div>
    <script src="./vue.js">
      
    </script>
    <script>
      // Vue.observable 创建响应式数据
      const state = Vue.observable({ count: 18 });
      // Vue.version 、
      console.log(Vue.version ,'vue的版本')
   //  Vue.compile 将字符串  模板编译成render函数可以渲染的内容
    // var res = Vue.compile('<div><span>{{ msg }}</span></div>')

      let listCom= Vue.component("listCom",{
            template:`<div>我是列表组件</div>`,
            data(){
              return {}
            }
        })

     new Vue({
      el:"#app",
      data(){
        return {}
      },
      render(h){ //render 函数 渲染 虚拟dom或组件
          // h 是 createElement 的简写
          // h('标签名',{属性},{内容})
          return h('div', {
            attr:{id:"box"},
            style:{color:"red"},
            on: { 
              click: () => { state.count++ }
            }
          }, [
            `数字是: ${state.count}`,
            h('span',{},'我是span'),
            h(listCom)
          ])
        } 
    })

    </script>
</body>
</html>